<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>woodwhales-ffmpeg-tool</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-row :gutter="20">
            <el-col :span="2">
                &nbsp;
            </el-col>
            <el-col :span="20" style="text-align: center;">
                <h3>音视频转换工具</h3>
            </el-col>
            <el-col :span="2">
                &nbsp;
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 10px;">
            <el-col :span="2">
                &nbsp;
            </el-col>
            <el-col :span="20" style="text-align: center;">
                <el-tabs v-model="temp.activeName" @tab-click="handleClick">
                    <el-tab-pane label="音视频分割" name="splice">
                        <el-row :gutter="20" style="margin-bottom: 10px;">
                            原始文件名称：<el-input v-model="dataForm.srcFileName" :disabled="temp.disableEdit" placeholder="请输入原始文件名称" style="width: 800px;"></el-input>
                        </el-row>
                        <el-row :gutter="20" style="margin-bottom: 10px;">
                            原始文件地址：<el-input v-model="dataForm.srcFilePath" :disabled="temp.disableEdit" placeholder="请输入原始文件地址" style="width: 800px;" @change="onChangeSrcFilePath"></el-input>
                        </el-row>
                        <el-row :gutter="20" style="margin-bottom: 10px;">
                            目标文件地址：<el-input v-model="dataForm.destFilePath" :disabled="temp.disableEdit" placeholder="请输入目标文件地址" style="width: 800px;"></el-input>
                        </el-row>
                        <el-row :gutter="20" style="margin-bottom: 10px;">
                            <el-button size="mini" @click="onAddTime" :disabled="temp.disableEdit">添加时间范围</el-button>
                        </el-row>
                        <el-row :gutter="20" style="margin-bottom: 10px;">
                            <template v-for="(item,index) in dataForm.timeArrList">
                                <el-row :gutter="20" style="margin-bottom: 5px;">
                                    <el-time-picker placeholder="选择时间" v-model="item[0]" value-format="HH:mm:ss"></el-time-picker>
                                    <el-time-picker placeholder="选择时间" v-model="item[1]" value-format="HH:mm:ss"></el-time-picker>
                                    <el-button style="margin-left: 5px;" type="danger" icon="el-icon-delete" size="mini" @click="remove(index)"></el-button>
                                </el-row>
                            </template>
                        </el-row>
                        <el-row :gutter="20" style="margin-bottom: 10px;">
                            <el-button size="mini" @click="onSplice" type="primary" :disabled="temp.disableEdit">分割</el-button>
                            <el-button size="mini" @click="initDateForm">重置</el-button>
                        </el-row>
                        <el-row :gutter="20" style="margin-bottom: 10px; text-align: left; font-size: 14px;" v-if="temp.respSrcDuration !== null">
                            <span style="margin-left: 10px;">原始视频总时长：{{temp.respSrcDuration}}</span>
                        </el-row>
                        <template v-for="item in temp.respLog">
                            <el-row :gutter="20" style="margin-bottom: 20px;" v-if="temp.respLog !== ''">
                                <el-col :span="24">
                                        <el-card class="box-card" style="background-color: #121212">
                                            <span v-for="line in item" style="font-size: 12px; text-align: left; display: block; color: #ffc800;">{{line}}</span>
                                        </el-card>
                                </el-col>
                            </el-row>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="音频转视频" name="audioToVideo">
                        <el-row :gutter="20" style="margin-bottom: 10px;">
                            原始文件名称：<el-input v-model="dataForm2.srcFileName" :disabled="temp.disableEdit2" placeholder="请输入原始文件名称" style="width: 800px;"></el-input>
                        </el-row>
                        <el-row :gutter="20" style="margin-bottom: 10px;">
                            原始文件地址：<el-input v-model="dataForm2.srcFilePath" :disabled="temp.disableEdit2" placeholder="请输入原始文件地址" style="width: 800px;" @change="onChangeSrcFilePath2"></el-input>
                        </el-row>
                        <el-row :gutter="20" style="margin-bottom: 10px;">
                            目标文件地址：<el-input v-model="dataForm2.destFilePath" :disabled="temp.disableEdit2" placeholder="请输入目标文件地址" style="width: 800px;"></el-input>
                        </el-row>
                        <el-row :gutter="20" style="margin-bottom: 10px;">
                            <el-button size="mini" @click="onConvert" :disabled="temp.disableEdit2" type="primary">转换</el-button>
                            <el-button size="mini" @click="initDateForm2">重置</el-button>
                        </el-row>
                        <el-row :gutter="20" style="margin-bottom: 10px; text-align: left; font-size: 14px;" v-if="temp.respSrcDuration2 !== null">
                            <span style="margin-left: 10px;">原始视频总时长：{{temp.respSrcDuration2}}</span>
                        </el-row>
                        <template v-for="item in temp.respLog2">
                            <el-row :gutter="20" style="margin-bottom: 20px;" v-if="temp.respLog2 !== ''">
                                <el-col :span="24">
                                    <el-card class="box-card" style="background-color: #121212">
                                        <span v-for="line in item" style="font-size: 12px; text-align: left; display: block; color: #ffc800;">{{line}}</span>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </template>
                    </el-tab-pane>
                    <el-row :gutter="20" style="margin-bottom: 10px;">
                        <p style="font-size: 14px;"><el-link :underline="false" type="primary" href="https://woodwhales.cn" target="_blank">woodwhales.cn</el-link></p>
                    </el-row>
                </el-tabs>
            </el-col>
            <el-col :span="2">
                &nbsp;
            </el-col>
        </el-row>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" th:inline="none">
    new Vue({
    el: '#app',
    data: function () {
        return {
            temp: {
                activeName: 'splice',
                disableEdit: false,
                disableEdit2: false,
                respSrcDuration: null,
                respSrcDuration2: null,
                respLog: [],
                respLog2: []
            },
            dataForm2: {
                srcFileName: null,
                srcFilePath: null,
                destFilePath: null
            },
            dataForm: {
                srcFileName: null,
                srcFilePath: null,
                destFilePath: null,
                timeArrList: [
                ]
            }
        }
    },
    methods: {
        handleClick: function(tab, event) {
            console.log(tab, event);
        },
        onAddTime: function() {
            let obj = ['00:00:00', '00:00:00']
            this.dataForm.timeArrList.push(obj);
        },
        onChangeSrcFilePath: function() {
            if(this.dataForm.destFilePath === '' || this.dataForm.destFilePath == null) {
                this.dataForm.destFilePath = this.dataForm.srcFilePath;
            }
        },
        onChangeSrcFilePath2: function () {
            if(this.dataForm2.destFilePath === '' || this.dataForm2.destFilePath == null) {
                this.dataForm2.destFilePath = this.dataForm2.srcFilePath;
            }
        },
        onConvert: function() {
            if(this.dataForm2.srcFileName === '' || this.dataForm2.srcFileName == null) {
                this.$message({
                    message: '请输入原始文件名称',
                    type: 'warning'
                });
                return;
            }
            if(this.dataForm2.srcFilePath === '' || this.dataForm2.srcFilePath == null) {
                this.$message({
                    message: '请输入原始文件地址',
                    type: 'warning'
                });
                return;
            }
            if(this.dataForm2.destFilePath === '' || this.dataForm2.destFilePath == null) {
                this.$message({
                    message: '请输入目标文件地址',
                    type: 'warning'
                });
                return;
            }
            this.temp.disableEdit2 = true;
            axios.post('/videoToAudioV2', this.dataForm2)
                .then(response => {
                    if(response.data.code === 0) {
                        this.$message({
                            message: response.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(response.data.msg);
                    }
                    this.temp.respLog2 = response.data.data.executeLogList;
                    this.temp.respSrcDuration2 = response.data.data.mediaDuration;
                })
                .catch(error => {
                    this.$message.error(error);
                    console.log(error);
                });
        },
        initDateForm: function () {
            this.dataForm.srcFileName = null;
            this.dataForm.srcFilePath = null;
            this.dataForm.destFilePath = null;
            this.dataForm.timeArrList = [];
            this.temp.respLog = [];
            this.temp.disableEdit = false;
            this.temp.respSrcDuration = null;
        },
        initDateForm2: function () {
            this.dataForm2.srcFileName = null;
            this.dataForm2.srcFilePath = null;
            this.dataForm2.destFilePath = null;
            this.temp.respLog2 = [];
            this.temp.disableEdit2 = false;
            this.temp.respSrcDuration2 = null;
        },
        onSplice: function() {
            if(this.dataForm.srcFileName === '' || this.dataForm.srcFileName == null) {
                this.$message({
                    message: '请输入原始文件名称',
                    type: 'warning'
                });
                return;
            }
            if(this.dataForm.srcFilePath === '' || this.dataForm.srcFilePath == null) {
                this.$message({
                    message: '请输入原始文件地址',
                    type: 'warning'
                });
                return;
            }
            if(this.dataForm.destFilePath === '' || this.dataForm.destFilePath == null) {
                this.$message({
                    message: '请输入目标文件地址',
                    type: 'warning'
                });
                return;
            }
            if(this.dataForm.timeArrList.length === 0) {
                this.$message({
                    message: '请输入要分割的时间范围',
                    type: 'warning'
                });
                return;
            }
            this.temp.disableEdit = true;
            axios.post('/parseV2', this.dataForm)
            .then(response => {
                if(response.data.code === 0) {
                    this.$message({
                        message: response.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message.error(response.data.msg);
                }
                this.temp.respLog = response.data.data.executeLogList;
                this.temp.respSrcDuration = response.data.data.mediaDuration;
            })
            .catch(error => {
                this.$message.error(error);
                console.log(error);
            });
        },
        remove: function(index) {
            this.dataForm.timeArrList.splice(index, 1);
        }
    }
    
    })
</script>
</html>